<template>
	<view >
		<!-- 顶部司机信息 -->
		<view class="topBackground"  :style="{ height: $height * 0.15 + 'px' }" >
			<view class="flex-allCenter" :style="{ width: $width * 0.15 + 'px' }">
				<image style="width: 60rpx; height: 60rpx;" src="../../static/icon/portrait.png"></image>
			</view>
			<view class="flex-sub text-white">您好：{{driverInfo.driverName}}</view>
		</view>
		<!-- 司机行程信息 -->
		<view class="flex-row margin-bottom">
			<view class="width-flex padding-sm" :style="{ height: $height * 0.10 + 'px' }">
				<view class="driverTripStyle">
					<view class="flex-sub flex-row text-sm text-bold">本月总行程</view>
					<view class="flex-sub flex-allCenter width">{{driverInfo.tripNumberMonth}}</view>
				</view>
			</view>
			<view class="width-flex padding-sm" :style="{ height: $height * 0.10 + 'px' }">
				<view class="driverTripStyle">
					<view class="flex-sub flex-row text-sm text-bold">本月已完成</view>
					<view class="flex-sub flex-allCenter width">{{driverInfo.tripNumberMonthEd}}</view>
				</view>
			</view>
			<view class="width-flex padding-sm" :style="{ height: $height * 0.10 + 'px' }">
				<view class="driverTripStyle">
					<view class="flex-sub flex-row text-sm text-bold">今日待出行</view>
					<view class="flex-sub flex-allCenter width">{{driverInfo.tripNumberWaitToday}}</view>
				</view>
			</view>
			<view class="width-flex padding-sm" :style="{ height: $height * 0.10 + 'px' }">
				<view class="driverTripStyle">
					<view class="flex-sub flex-row text-sm text-bold">今日已完成</view>
					<view class="flex-sub flex-allCenter width">{{driverInfo.tripNumberToday}}</view>
				</view>
			</view>
		</view>
		<!-- 可操作模块 -->
		<view class="padding-lr-sm" >
			<view class="controlModule" :style="{ height: $heightRpx * 0.40 + 'rpx' }" >
				<view class="flex-row height-bth solid-bottom">
					<image style="width: 10rpx; height: 40rpx; margin-left: 10rpx;" src="../../static/icon/itltle_icon.jpg"></image>
					<view class="flex-sub flex-row margin-left-sm text-df text-bold">应用中心</view>
				</view>
				<view class="flex-sub flex-row">
					<view class="width-flex flex-allCenter flex-direction padding-xs"  @click="searchOrder">
						<image style="width: 70rpx; height: 80rpx;" src="../../static/icon/orderapp.png"/>
						<view class="margin-top-s">订单</view>
					</view>
					<view class="width-flex flex-allCenter flex-direction padding-xs" @click="callCustomer">
						<image style="width: 70rpx; height: 80rpx;" src="../../static/icon/kefu.png"/>
						<view class="margin-top-s">客服</view>
					</view>
					<view class="width-flex flex-allCenter flex-direction padding-xs" @click="ceshi">
						<image style="width: 70rpx; height: 80rpx;" src="../../static/icon/huodong.png"/>
						<view class="margin-top-s">活动奖励</view>
					</view>
					<view class="width-flex flex-allCenter flex-direction padding-xs" @click="toSetting">
						<image style="width: 70rpx; height: 80rpx;" src="../../static/icon/setting.png"/>
						<view class="margin-top-s">设置</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 客服弹出层 -->
		<uni-popup ref="popup" type="center" background-color="rgba(0,0,0,0)" >
			<view class="bg-white radius flex flex-direction" style="width: 680rpx; height: 380rpx;">
				<view class="solid-bottom flex-row justify-center text-xl text-bold"
					style="height: 120rpx;width: 100%;">联系客服</view>
				<view class="flex-row justify-center" style="height: 80rpx;">客服电话：{{number}}</view>
				<view class="flex-sub flex-row">
					<view class="callStyle bg-red-light " @click="cancelCall">取消</view>
					<view class="callStyle bg-blue-light " @click="confirmCall">确认呼叫</view>
				</view>
			</view>
		</uni-popup>
	
	<u-tabbar
		:value="tabBarvalue"
		@change="change"
		:fixed="true"
		:placeholder="true"
		:safeAreaInsetBottom="true"
	>
		<u-tabbar-item text="首页" icon="home" ></u-tabbar-item>
		<u-tabbar-item text="行程" icon="car"  ></u-tabbar-item>
		<u-tabbar-item text="排班" icon="calendar"></u-tabbar-item>
		<u-tabbar-item text="消息" icon="chat" :badge="badgeNum"></u-tabbar-item>
	</u-tabbar>	

	</view>
</template>

<script>
	import webSocket from '../../common/service/websocket';
	import { getNoticeNumber } from '../../api/noticeApi';
	import { changeMenu } from '../../api/constant';
	import { getDriverInfo } from '../../api/driver_api';
	import { send } from '../../api/tripApi';
	export default {
		data() {
			return {
				tabBarvalue: 0,//tabbar值
				show: false,//呼叫客服弹出层
				number: '17390992285', //客服电话
				topHeight:0,
				driverInfo:{},//司机首页显示信息
				badgeNum:0
			}
		},
		onShow() {
			this.tabBarvalue = 0;
			this.queryInfo();
		},
		methods: {
			change(param){
				changeMenu(param);
			},
			/**呼叫客服弹出层变化监控*/
			callCustomer() {
				this.$refs.popup.open();
			},
			/**取消呼叫客服*/
			cancelCall() {
				this.$refs.popup.close();
			},
			/**客服拨号*/
			confirmCall() {
				uni.makePhoneCall({
					phoneNumber: this.number // 这里填入你要拨打的电话号码
				});
			},
			/**查询司机相关信息*/
			async queryInfo(){
				let driverid = uni.getStorageSync('login_user_info').userId;
				let param = {
					driverId: driverid
				}
				await getDriverInfo(param).then(res=>{
					if(res.data.code==200){
						this.driverInfo = res.data.data;
					}else{
						this.$modal.msg(res.data.msg);
					}
				});
				await getNoticeNumber().then(res=>{
					if(res.data.code==200){
						uni.setStorageSync('badge', res.data.data);
						this.badgeNum = uni.getStorageSync('badge');
						webSocket.init();
					}else{
						this.$modal.msg(res.data.msg);
					}
				})
			},
			/**跳转系统设置*/
			toSetting(){
				this.$tab.navigateTo('/pages/setting/settingList')
			},
			/**订单查询*/
			searchOrder(){
				this.$tab.navigateTo('/pages/order/orderSearch')
			},
			ceshi(){
				this.$tab.navigateTo('/pages/ceshi/icon')
			}
			
		}
	}
</script>

<style>
	.topBackground{
		width: 100%;
		height: 30%;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		background-color: #000088;
	}
	
	.driverTripStyle{
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		flex-direction: column;
		padding: 0 10rpx;
		background-color: #fff;
		border-radius: 12rpx;
	}
	
	.controlModule{
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-radius: 12rpx;
	}
	
	.callStyle {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		border-radius: 40rpx;
		margin: 0 40rpx 0 20rpx;
		padding: 20rpx;
		height: 80rpx;
	
	}
	
</style>
